import React, { useRef, useState } from 'react';
import { useIntl } from 'umi';
import { ProTable } from '@ant-design/pro-table';
import style from './index.less';

import { Button, Space } from 'antd';

import ChangeSetRoute from './ChangeSetRoute';

const SetNotificationPath: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const [open, setOpen] = useState(false);
  const [routeFlag, setrouteFlag] = useState(1);
  const actionRef = useRef();
  const refData = localStorage.getItem('i18nextLng');

  const columns = [
    {
      title: () => <>{t('form.SubmerchantNo')}</>,
      // title: '子商户号',
      dataIndex: 'applytitle',
      valueType: 'select',
      valueEnum: {
        miandian: '缅甸小店',
        longhu: '龙湖小店',
      },
    },

    {
      disable: true,
      title: () => <>{t('layout.NotificationPath')}</>,
      // title: '通知路径',
      dataIndex: 'type',

      hideInSearch: true,
    },

    {
      // title: '操作',
      title: () => <>{t('form.Option')}</>,
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => {
        return (
          <Space>
            <Button
              type="link"
              onClick={() => {
                setOpen(true);
                setrouteFlag(1);
              }}
            >
              {/* 修改 */}
              {t('buttons.Modify')}
            </Button>
            <Button type="link">
              {/* 删除 */}
              {t('buttons.Delete')}
            </Button>
          </Space>
        );
      },
    },
  ];

  const showModal = () => {
    setOpen(true);
  };

  const hideModal = () => {
    setOpen(false);
  };

  return (
    <div className={style.ApplicationResultBoss}>
      <ChangeSetRoute
        routeFlag={routeFlag}
        showModal={showModal}
        hideModal={hideModal}
        open={open}
      />
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        form={{ labelWrap: true }}
        request={async (params = {}, sort, filter) => {
          console.log('params', params, 'sort', sort, 'filter', filter);

          const data = [
            {
              id: 1,
              shanghao: '11',
              applytitle: '1212121',
            },
            {
              id: 2,
              shanghao: '22',
              maichu: '121312',
            },
            {
              id: 3,
              shanghao: '22',
              maichu: '速度输出',
            },
            {
              id: 4,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
          ];

          return {
            data: data,
          };
        }}
        rowKey="id"
        options={false}
        search={{
          labelWidth: 90,
          // span: 12,
          // optionRender: ({ searchText, resetText }, { form }, dom) => [
          //   <Button
          //     key="searchText"
          //     type="primary"
          //     onClick={() => {
          //       form?.submit();
          //     }}
          //   >
          //     提交
          //     {/* {t("buttons.query")} */}
          //   </Button>,
          //   <Button
          //     key="resetText"
          //     onClick={() => {
          //       form?.resetFields();
          //     }}
          //   >
          //     {/* {t("buttons.Reset")} */}
          //     重置
          //   </Button>,
          // ],
          // collapseRender: (collapsed, showCollapseButton) => {
          //   return collapsed ? (
          //     <Button
          //       type="link"
          //       key="resetText"
          //       onClick={() => {
          //         console.log(
          //           "collapsed, showCollapseButton",
          //           collapsed,
          //           showCollapseButton
          //         );
          //         setShowFlag(collapsed);
          //       }}
          //     >
          //       展开
          //       {/* {t("buttons.Open")} */}
          //     </Button>
          //   ) : (
          //     <Button
          //       type="link"
          //       key="resetText"
          //       onClick={() => {
          //         console.log(
          //           "collapsed, showCollapseButton",
          //           collapsed,
          //           showCollapseButton
          //         );
          //         setShowFlag(collapsed);
          //       }}
          //     >
          //       关闭
          //       {/* {t("buttons.Close")} */}
          //     </Button>
          //   );
          // },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
        toolBarRender={() => [
          <Button
            key="button"
            type="primary"
            onClick={() => {
              setOpen(true);
              setrouteFlag(2);
            }}
          >
            新增
            {/* {t("buttons.Add")} */}
          </Button>,
        ]}
      />
    </div>
  );
};

export default SetNotificationPath;
